/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { Modal, Spin, Steps, Icon } from "antd";
import { connect } from "dva";
import styles from "./index.less";
import { isArray } from "@/utils/isSomeType";
import { dateCalendar } from "@/utils/utils";

const { Step } = Steps;

@connect(({ express, loading }) => {
  return {
    expressInfo: express.expressInfo,
    loading: loading.effects["express/getExpressInfo"]
  };
})
class ExpressInfo extends PureComponent {
  getExpressInfo = () => {
    const { dispatch, data } = this.props;
    dispatch({
      type: "express/getExpressInfo",
      payload: {
        ...data
      }
    });
  };

  componentDidMount() {
    this.getExpressInfo();
  }

  progressDot = (iconDot, { status }) => {
    return <Icon type={status === "success" ? "check-circle" : "up-circle"} />;
  };

  expressFormat = () => {
    const { expressInfo, loading } = this.props;
    if (!expressInfo || !isArray(expressInfo.list) || loading)
      return (
        <span style={{ color: "#999" }}>
          {loading ? "物流信息读取中..." : "暂无物流信息"}
        </span>
      );
    return (
      <Steps
        direction="vertical"
        progressDot={this.progressDot}
        labelPlacement="vertical"
      >
        {expressInfo.list.map((item, index) => {
          const { date, info, status } = item;
          const [time, day] = date.split("<br/>");
          return (
            <Step
              status={status == 1 ? "success" : "wait"}
              key={index}
              title={dateCalendar(`${day} ${time}`)}
              description={info}
            />
          );
        })}
      </Steps>
    );
  };

  render() {
    const { loading } = this.props;
    return (
      <Spin spinning={loading === true}>
        <div className={styles.infoList}>{this.expressFormat()}</div>
      </Spin>
    );
  }
}

class ExpressModal extends PureComponent {
  state = {
    visible: false
  };

  handleCancel = () => {
    this.props.cleanData();
  };

  static getDerivedStateFromProps(props) {
    return {
      visible: !!props.data
    };
  }

  modalTitle = () => {
    const { waybill_no, brand_name } = this.props.data;
    return `物流详情： ${waybill_no} ${brand_name}`;
  };

  render() {
    const { visible } = this.state;
    const { data } = this.props;
    if (!data) return null;
    const { brand, waybill_no: waybill } = data;
    return (
      <Modal
        onCancel={this.handleCancel}
        title={this.modalTitle()}
        centered
        visible={visible}
        width={800}
        footer={false}
      >
        <ExpressInfo
          data={{
            brand,
            waybill
          }}
        />
      </Modal>
    );
  }
}

export { ExpressModal as default, ExpressInfo };
